import * as React from 'react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import * as dateFns from 'date-fns';
import { PositionRow } from './ui.model';

export interface PositionGridProps {
    rows: PositionRow[];
    loading: boolean;
}

const PositionGrid = ({ rows, loading }: PositionGridProps): React.ReactElement => {

    return (
        <>
            {!!loading && 'LOADING'}
            {(!loading && rows.length === 0) && 'No data'}
            {(!loading && rows.length !== 0) &&
                <TableContainer component={Paper}>
                    <Table sx={{ minWidth: 650 }} >
                        <TableHead>
                            <TableRow>
                                <TableCell>Id</TableCell>
                                <TableCell align="right">Status</TableCell>
                                <TableCell align="right">Open time</TableCell>
                                <TableCell align="right">Close time</TableCell>
                                <TableCell align="right">Balance delta</TableCell>
                                <TableCell align="right">Balance delta percent</TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {rows.map((row) => (
                                <TableRow
                                    key={row.id}
                                    sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                                >
                                    <TableCell component="th" scope="row">{row.id}</TableCell>
                                    <TableCell align="right">{row.status}</TableCell>
                                    <TableCell align="right">{dateFns.format(new Date(row.openTime), '	Y-MM-dd HH:mm')}</TableCell>
                                    <TableCell align="right">{dateFns.format(new Date(row.closeTime), '	Y-MM-dd HH:mm')}</TableCell>
                                    <TableCell align="right">{row.balanceDelta}</TableCell>
                                    <TableCell align="right">{`${row.balanceDeltaPercent}%`}</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </TableContainer>
            }   
        </>
    );
}

export default PositionGrid;